<template>
  <el-dialog

    title="银行卡信息"
    :visible.sync="visible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form id="loading-wrap" ref="form1" :model="form1" label-width="180px" label-position="top">
      <div class="image-wrap">
        <div v-for="(item, index) in arr " :key="index">
          <imageBox :label="item.label" :data="item.data" />
        </div>
      </div>
    </el-form>
    <el-button @click="handleClose">取 消</el-button>
  </el-dialog>
</template>

<script>
import request from '@/utils/request'
import imageBox from './imageBox.vue'

export default {
  components: {
    imageBox
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      loadingState: {},
      arr: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.arr = []
      this.$emit('handleClose')
    },
    getInfo(id) {
      request({ url: 'system/bankCard/' + id, method: 'get' }).then(res => {
        if (res.data) {
          // 处理第二个内容
          const config = [{ label: '银行卡正面', key: 'bankCardFront' }, { key: 'bankCardBack', label: '银行卡背面' }]
          config[0].data = [res.data.bankCardFront]
          config[1].data = [res.data.bankCardBack]
          this.arr = config
        }
      }).finally(() => {
        this.loadingState.close()
      })
    },

    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap'
      })
      this.loadingState = loading
    }
  }
}
</script>
<style scoped>
.image-wrap {
  width: 90%;
  /* border:  1px solid black; */
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
</style>
